<template>
  <view class="page">
   <!-- 顶部车辆卡片（展示） -->
   <view class="car-card" v-if="infoReady">
     <image class="car-img" :src="data_info.logo" mode="aspectFill"></image>
     <view class="car-text">
       <view>{{data_info.brand}}、{{curCarName}}</view>
       <view class="sub">{{curCarPrice}}</view>
       <view class="vin">{{base.vin}}</view>
     </view>
   </view>

    <!-- 车辆信息（默认收起，只读） -->
    <view class="section">
      <view class="section-hd">
        <text class="section-title">车辆信息</text>
        <text class="fold-btn" @tap="fold.vehicle = !fold.vehicle">{{ fold.vehicle ? '展开' : '收起' }}</text>
      </view>
      <view v-show="!fold.vehicle" class="form-card readonly">
        <view class="cell"><view class="label">上牌时间</view><view class="value">{{ base.reg_date }}</view></view>
        <view class="cell"><view class="label">车牌</view><view class="value">{{ base.plate_no }}</view></view>
        <view class="cell"><view class="label">公里数</view><view class="value">{{ base.km }}</view></view>
        <view class="cell"><view class="label">内外色</view><view class="value">{{ base.color }}</view></view>
        <view class="cell"><view class="label">过户次数</view><view class="value">{{ base.transfer_times }}</view></view>
        <view class="cell"><view class="label">是否运营</view><view class="value">{{ base.is_operate }}</view></view>
        <view class="cell"><view class="label">所在地</view><view class="value">{{ base.city }}</view></view>
      </view>
    </view>

    <!-- 图片信息（默认收起，只读+可预览） -->
    <view class="section">
      <view class="section-hd">
        <text class="section-title">图片信息</text>
        <text class="fold-btn" @tap="fold.pics = !fold.pics">{{ fold.pics ? '展开' : '收起' }}</text>
      </view>
      <view v-show="!fold.pics" class="form-card readonly">
        <view class="cell" v-for="f in photoFields" :key="f.key">
          <view class="label">{{ f.label }}</view>
          <view class="value">
            <text>{{ pics[f.key] ? '已上传' : '—' }}</text>
            <image v-if="pics[f.key]" class="thumb" :src="pics[f.key]" mode="aspectFill" @tap.stop="previewPic(f.key)"/>
          </view>
          <text class="ic">👁</text>
        </view>
      </view>
    </view>

    <!-- 风险评估（默认展开） -->
    <view class="section">
      <view class="section-hd">
        <text class="section-title">风险评估</text>
        <text class="fold-btn" @tap="fold.risk = !fold.risk">{{ fold.risk ? '展开' : '收起' }}</text>
      </view>
      <view v-show="!fold.risk" class="form-card">
        <!-- 三项证明图：只读 + 预览 -->
        <view class="cell">
          <view class="label">被执行</view>
          <view class="value">
            <text>{{ suppPics.executed_cert ? '已上传' : '—' }}</text>
            <image v-if="suppPics.executed_cert" class="thumb" :src="suppPics.executed_cert" @tap.stop="previewLocal(suppPics.executed_cert)"/>
          </view>
          <text class="ic">👁</text>
        </view>
        <view class="cell">
          <view class="label">抵押状态</view>
          <view class="value">
            <text>{{ suppPics.mortgage_cert ? '已上传' : '—' }}</text>
            <image v-if="suppPics.mortgage_cert" class="thumb" :src="suppPics.mortgage_cert" @tap.stop="previewLocal(suppPics.mortgage_cert)"/>
          </view>
          <text class="ic">👁</text>
        </view>
        <view class="cell">
          <view class="label">违章状态</view>
          <view class="value">
            <text>{{ suppPics.violate_cert ? '已上传' : '—' }}</text>
            <image v-if="suppPics.violate_cert" class="thumb" :src="suppPics.violate_cert" @tap.stop="previewLocal(suppPics.violate_cert)"/>
          </view>
          <text class="ic">👁</text>
        </view>

        <!-- 风险等级：可选择 -->
        <view class="cell">
          <view class="label">对象风险等级</view>
          <picker :range="riskLevelOpts" :value="risk.object_level_index" @change="e=>risk.object_level_index=+e.detail.value">
            <view class="value value-select">{{ riskLevelOpts[risk.object_level_index] }}</view>
          </picker>
          <text class="ic">▾</text>
        </view>
        <view class="cell">
          <view class="label">标的风险等级</view>
          <picker :range="riskLevelOpts" :value="risk.target_level_index" @change="e=>risk.target_level_index=+e.detail.value">
            <view class="value value-select">{{ riskLevelOpts[risk.target_level_index] }}</view>
          </picker>
          <text class="ic">▾</text>
        </view>
      </view>
    </view>
	<!-- 授信信息（默认展开，可编辑） -->
	<view class="section">
	  <view class="section-hd">
	    <text class="section-title">授信信息</text>
	    <text class="fold-btn" @tap="fold.credit = !fold.credit">{{ fold.credit ? '展开' : '收起' }}</text>
	  </view>
	
	  <view v-show="!fold.credit" class="form-card">
	    <!-- 是否授信 -->
	    <view class="cell">
	      <view class="label">是否授信</view>
	      <picker :range="creditEnableOpts" :value="credit.enabled_index" @change="e=>credit.enabled_index=+e.detail.value">
	        <view class="value value-select">{{ creditEnableOpts[credit.enabled_index] }}</view>
	      </picker>
	      <text class="ic">▾</text>
	    </view>
	
	    <!-- 授信对象 & 证件 -->
	    <view class="cell">
	      <view class="label">授信对象</view>
	      <view class="value"><input class="ipt" v-model="credit.object" placeholder="请输入姓名/公司"/></view>
	    </view>
	    <view class="cell">
	      <view class="label">身份证号/统一信用代码</view>
	      <view class="value"><input class="ipt" v-model="credit.idcode" placeholder="请输入"/></view>
	    </view>
	
	    <!-- 授信额度 & 有效期 -->
	    <view class="cell">
	      <view class="label">授信额度</view>
	      <view class="value"><input class="ipt" type="digit" v-model="credit.quota" placeholder="请输入金额"/></view>
	    </view>
	    <picker mode="date" :value="credit.expire_date" @change="onCreditDateChange">
	      <view class="cell">
	        <view class="label">授信有效期</view>
	        <view class="value">{{ credit.expire_date || '请选择' }}</view>
	        <text class="ic">📅</text>
	      </view>
	    </picker>
	  </view>
	</view>

    <!-- 补充信息（默认展开，可编辑） -->
    <view class="section">
      <view class="section-hd">
        <text class="section-title">补充信息</text>
        <text class="fold-btn" @tap="fold.supp = !fold.supp">{{ fold.supp ? '展开' : '收起' }}</text>
      </view>
      <view v-show="!fold.supp" class="form-card">
        <picker mode="date" :value="supp.pay_time" @change="onDateChange">
          <view class="cell req">
            <view class="label">打款时间*</view>
            <view class="value">{{ supp.pay_time || '请选择' }}</view>
            <text class="ic">📅</text>
          </view>
        </picker>
        <view class="cell req">
          <view class="label">采购价（万）*</view>
          <view class="value"><input class="ipt" type="digit" v-model="supp.purchase_price" placeholder="请输入" /></view>
        </view>
        <view class="cell req">
          <view class="label">产权登记证*</view>
          <view class="value">
            <view class="uploader" @tap.stop="chooseImage('suppPics.property_cert')">
              <text class="iconfont icon-tupian"></text>
              <image v-if="suppPics.property_cert" class="thumb" :src="suppPics.property_cert" @tap.stop="previewLocal(suppPics.property_cert)" />
            </view>
          </view>
        </view>
        <view class="cell req">
          <view class="label">钥匙数*</view>
          <view class="value"><input class="ipt" type="number" v-model="supp.key_count" placeholder="请输入" /></view>
        </view>
      </view>
    </view>

    <!-- 销售信息（默认展开，可编辑） -->
    <view class="section">
      <view class="section-hd">
        <text class="section-title">销售信息</text>
        <text class="fold-btn" @tap="fold.sale = !fold.sale">{{ fold.sale ? '展开' : '收起' }}</text>
      </view>
      <view v-show="!fold.sale" class="form-card">
        <view class="cell req">
          <view class="label">拟零售价*</view>
          <view class="value"><input class="ipt" type="digit" v-model="sale.retail_price" placeholder="请输入" /></view>
        </view>
        <view class="cell req">
          <view class="label">拟批发价*</view>
          <view class="value"><input class="ipt" type="digit" v-model="sale.wholesale_price" placeholder="请输入" /></view>
        </view>
      </view>
    </view>

    <!-- 经办记录（默认收起，只读） -->
    <view class="section">
      <view class="section-hd">
        <text class="section-title">经办记录</text>
        <text class="fold-btn" @tap="fold.timeline = !fold.timeline">{{ fold.timeline ? '展开' : '收起' }}</text>
      </view>
      <view v-show="!fold.timeline" class="timeline">
        <view class="t-row t-hd">
          <text class="t-col">节点</text>
          <text class="t-col">经办人/岗位</text>
          <text class="t-col">时间</text>
          <text class="t-col">结果</text>
        </view>
        <view class="t-row" v-for="(item,index) in task_list" :key="index" :style="item.status == 2 ? 'color:#ff0000' : ''">
          <text class="t-col">{{item.step_name}}</text>
          <text class="t-col">{{item.cname}} / {{item.group_name}}</text>
          <text class="t-col">{{item.create_time}}</text>
          <text class="t-col">{{item.status_name}}</text>
        </view>
      </view>
    </view>

    <!-- 意见栏（保留） -->
    <view class="section" v-if="base.my_info">
      <view class="section-hd">
        <text class="section-title">意见栏</text>
        <text class="fold-btn" @tap="fold.opinion = !fold.opinion">{{ fold.opinion ? '展开' : '收起' }}</text>
      </view>
      <view v-show="!fold.opinion" class="op-box">
        <textarea v-model="opinion" placeholder="填写审核意见（可选）" maxlength="300" auto-height />
        <view class="hint">当前节点：
          <text class="danger">{{ task_list.length>0 ? (task_list[task_list.length-1].step_name || '-') : '-' }}</text>
        </view>
      </view>
    </view>

    <!-- 底部按钮：驳回 / 提交 -->
    <view class="bottom-btn-box">
      <button class="btn btn-gray" @tap="onReject">驳回</button>
      <button class="btn btn-primary" @tap="onSubmit">提交</button>
    </view>
  </view>
</template>

<script>
import common_config from '@/static/js/common.js'
const config = common_config.config
let userInfo
let that
export default {
  data(){
    return{
      // 折叠开关
      fold:{ vehicle:true, pics:true, risk:false, supp:false, sale:false, timeline:false, opinion:false },

      // 路由入参
      id:0,        // 业务主键：读取 风险/补充/销售
      price_id:0,  // 价格主键：读取 车辆/图片/顶部卡片

      // 顶部卡片 & 只读基础
      vin:'', infoReady:false,
      base:{ reg_date:'', plate_no:'', km:'', color:'', transfer_times:'', is_operate:'', city:'', my_info:null },
      data_info:{carlist:[]}, car_index:-1,
      pics:{},
      photoFields:[
        { key:'license', label:'行驶证' },
        { key:'front', label:'车身正前' },
        { key:'front_left', label:'车身左前' },
        { key:'front_right', label:'车身右前' },
        { key:'rear', label:'车身正后' },
        { key:'rear_left', label:'车身左后' },
        { key:'rear_right', label:'车身右后' },
        { key:'dash_meter', label:'仪表台（里程）' },
        { key:'front_seat', label:'前排座椅' },
        { key:'rear_seat', label:'后排座椅' },
        { key:'nameplate', label:'车身铭牌' }
      ],
		data_info:{carlist:[]}, car_index:-1,
      // 风险等级（新增）
      riskLevelOpts: ['S 优','A 良','B 一般','C 差'],
      risk: {
        object_level_index: 1, // 默认 A
        target_level_index: 1  // 默认 A
      },

      // 可编辑：补充信息 & 销售信息
      supp:{ pay_time:'', purchase_price:'', key_count:'' },
      suppPics:{ property_cert:'', mortgage_cert:'', violate_cert:'', executed_cert:'' },
      sale:{ retail_price:'', wholesale_price:'' },

      // 经办记录 & 意见
      task_list:[],
      opinion:'',
	  vin:''
    }
  },
  onLoad(op){
	that = this;
    this.id = Number(op.id||0)
	this.vin = op.vin;
    this.price_id = Number(op.price_id||0);
	this.nodeName = op.node || this.nodeName
	common_config.common_if_login(()=>{}, ()=>{
	  userInfo=uni.getStorageSync('userInfo'); try{ userInfo=JSON.parse(userInfo) }catch(e){}
	  this.loadInfo()   // price_id -> 车辆&图片&顶部卡片
	  this.loadBiz()    // id -> 风险等级 + 三图、补充信息、销售信息
	  this.loadTask()   // 经办记录
	})
	
	
	
  
  },
  methods:{
	  
    token(){
      let raw = uni.getStorageSync('userInfo')
      if (!raw) return ''
      try{ const o = typeof raw==='string'? JSON.parse(raw):raw; return o && o.token ? o.token : '' }catch(e){ return '' }
    },

    // —— A：车辆信息 & 图片信息（price_id） —— //
    loadInfo(){
		this.fetchTopCard(this.vin);
      if(!this.price_id){ return }
      uni.request({
        url: `${config.request_url}/index/pinggu/step1_detail?token=${this.token()}`,
        method:'POST', header:{'Content-Type':'application/x-www-form-urlencoded'},
        data:{ id:this.price_id },
        success: ({data})=>{
          if(+data.code===200 && data.data){
            const d = data.data || {}
            this.vin = d.vin || ''
           // this.data_info = d.car_card || d.data_info || this.data_info
            if(typeof d.car_index!=='undefined') this.car_index = d.car_index
			
            this.base.reg_date = d.reg_date || ''
            this.base.plate_no = d.plate_no || ''
            this.base.km = d.km || ''
            this.base.color = d.color || ''
            this.base.transfer_times = d.transfer_times || ''
            this.base.is_operate = d.is_operate || ''
            this.base.city = d.city || ''
            this.base.my_info = d.my_info || null
            const pm = d.pics || {}
            for(const k in pm){ this.$set(this.pics, k, this.normalizeUrl(pm[k])) }
            this.infoReady = true
          }
        }
      })
    },
	fetchTopCard(vin){
	  uni.request({
	    url: `${config.request_url}/index/pinggu/step1?token=${userInfo?.token||''}`,
	    method:'POST', header:{'Content-Type':'application/x-www-form-urlencoded'},
	    data:{ vin },
	    success: (res)=>{ const r=res.data||{}; if(r.code==200){ this.data_info=r.data||{carlist:[]} } }
	  })
	},
    // —— B：风险等级 + 三图、补充、销售（id） —— //
    loadBiz(){
      if(!this.id){ return }
      uni.request({
        url: `${config.request_url}/index/caigou/step1_get?token=${this.token()}`,
        method:'GET', data:{ id:this.id },
        success: ({data})=>{
          if(+data.code===200 && data.data){
            const d = data.data || {}

            // 1) 补充信息
            if(d.supp){
              this.supp.pay_time        = d.supp.pay_time || ''
              this.supp.purchase_price  = d.supp.purchase_price || ''
              this.supp.key_count       = d.supp.key_count || ''
              this.suppPics.property_cert = d.supp.property_cert || ''
              // 三项证明图在“风险评估”展示，但数据还是沿用 suppPics
              this.suppPics.mortgage_cert = d.supp.mortgage_cert || ''
              this.suppPics.violate_cert  = d.supp.violate_cert  || ''
              this.suppPics.executed_cert = d.supp.executed_cert || ''
            }

            // 2) 销售信息
            if(d.sale){
              this.sale.retail_price    = d.sale.retail_price || ''
              this.sale.wholesale_price = d.sale.wholesale_price || ''
            }

            // 3) 风险等级
            if(d.risk){
              const toIdx = (val)=>{ // 支持 'A' 或 索引
                const map = {'S':0,'A':1,'B':2,'C':3}
                if(typeof val==='string'){ return map[val[0]]!=null? map[val[0]] : 1 }
                if(typeof val==='number'){ return val>=0&&val<4? val:1 }
                return 1
              }
              this.risk.object_level_index = toIdx(d.risk.object_level)
              this.risk.target_level_index = toIdx(d.risk.target_level)
            }
          }
        }
      })
    },

    // —— 经办记录（可选） —— //
    loadTask(){
      uni.request({
        url: `${config.request_url}/index/pinggu/load_task_list?token=${this.token()}&cid=${this.id}`,
        method:'GET',
        success: (res) => {
          res = res.data || {}
          if(res.code == 200 && res.data){ this.task_list = res.data }
        }
      })
    },

    // —— 可编辑交互 —— //
    onDateChange(e){ this.supp.pay_time = (e && e.detail && e.detail.value) ? e.detail.value : '' },
    chooseImage(path){
      uni.chooseImage({
        count:1, sizeType:['compressed'], sourceType:['album','camera'],
        success: (r)=>{ if(r && r.tempFilePaths && r.tempFilePaths[0]) this.setByPath(path, r.tempFilePaths[0]) }
      })
    },
    previewLocal(url){ if(url) uni.previewImage({urls:[url]}) },
    previewPic(key){
      const url = this.pics[key]
      if(!url) return
      const urls = this.photoFields.map(f=>this.pics[f.key]).filter(v=>!!v)
      const idx = urls.indexOf(url)
      uni.previewImage({ urls, current: idx>=0?idx:0 })
    },

    // —— 提交（仅提交 风险等级 + 补充信息 + 销售信息，用 id 作为主键） —— //
    validate(){
      if(!this.id) return '缺少id'
      if(!this.supp.pay_time) return '请选择打款时间'
      if(this.supp.purchase_price==='' || isNaN(Number(this.supp.purchase_price))) return '请填写采购价（万）'
      if(this.supp.key_count==='' || isNaN(parseInt(this.supp.key_count))) return '请填写钥匙数'
      if(!this.suppPics.property_cert) return '请上传产权登记证'
      // 风险三图只是展示，但若你想强制必填，可放开以下校验：
      // if(!this.suppPics.mortgage_cert) return '请上传抵押状态证明'
      // if(!this.suppPics.violate_cert)  return '请上传违章状态证明'
      // if(!this.suppPics.executed_cert) return '请上传被执行证明'
      // 若风险等级也要必选，放开：
      // if(this.risk.object_level_index===null) return '请选择对象风险等级'
      // if(this.risk.target_level_index===null) return '请选择标的风险等级'
      if(this.sale.retail_price==='' || isNaN(Number(this.sale.retail_price))) return '请填写投零售价'
      if(this.sale.wholesale_price==='' || isNaN(Number(this.sale.wholesale_price))) return '请填写投批发价'
      return ''
    },
    async ensureUploaded(){
      const needUpload = {
        'suppPics.property_cert': this.suppPics.property_cert,
        // 以下三项是“风险评估”展示用，但如果本次编辑也可能改图，依然统一上传
        'suppPics.mortgage_cert': this.suppPics.mortgage_cert,
        'suppPics.violate_cert':  this.suppPics.violate_cert,
        'suppPics.executed_cert': this.suppPics.executed_cert
      }
      for(const k in needUpload){
        const v = needUpload[k]
        if(v && !/^https?:\/\//.test(v)){
          const url = await this.uploadSingle(v)
          this.setByPath(k, url)
        }
      }
    },
    idx2Letter(i){ return ['S','A','B','C'][i] || 'A' },

    async onSubmit(){
      const err = this.validate(); if(err) return common_config.calert(err)
      uni.showLoading({title:'提交中'})
      try{
        await this.ensureUploaded()
        await new Promise((resolve,reject)=>{
          uni.request({
            url: `${config.request_url}/index/caigou/step1_submit?token=${this.token()}`,
            method:'POST', header:{'Content-Type':'application/x-www-form-urlencoded'},
            data:{
              id: this.id,
              // —— 风险等级 —— //
              'risk[object_level_index]': this.risk.object_level_index,
              'risk[target_level_index]': this.risk.target_level_index,
              'risk[object_level]': this.idx2Letter(this.risk.object_level_index),
              'risk[target_level]': this.idx2Letter(this.risk.target_level_index),
              // —— 补充信息 —— //
              'supp[pay_time]': this.supp.pay_time,
              'supp[purchase_price]': this.supp.purchase_price,
              'supp[key_count]': this.supp.key_count,
              'supp[property_cert]': this.suppPics.property_cert,
              // 三图（可能只读，如有编辑也会提交最新）
              'supp[mortgage_cert]': this.suppPics.mortgage_cert,
              'supp[violate_cert]': this.suppPics.violate_cert,
              'supp[executed_cert]': this.suppPics.executed_cert,
              // —— 销售信息 —— //
              'sale[retail_price]': this.sale.retail_price,
              'sale[wholesale_price]': this.sale.wholesale_price
            },
            success: ({data})=>{ (+data.code===200)? resolve(): reject(data.msg||'保存失败') },
            fail:()=>reject('网络异常')
          })
        })
        // 成功后的跳转或二次流程（若此查看页也要“通过”动作，可在此继续调 agree_step）
        uni.hideLoading()
        uni.showToast({title:'保存成功', icon:'success'})
      }catch(e){
        uni.hideLoading()
        common_config.calert(String(e||'提交失败'))
      }
    },

    onReject(){
      uni.showModal({
        title:'确认驳回',
        content:'驳回将回退流程，是否继续？',
        confirmText:'驳回', confirmColor:'#ef4444',
        success: (r)=>{
          if(!r.confirm) return
          uni.request({
            url: `${config.request_url}/index/pinggu/refuse_step?token=${this.token()}`,
            method:'POST', header:{'Content-Type':'application/x-www-form-urlencoded'},
            data:{ bak:this.opinion || '', cid:this.id },
            success: (res) => {
              res = res.data || {}
              if(res.code==200){ uni.navigateTo({ url:'/pages/index/sub_success?act=refuse' }) }
              else{ common_config.calert(res.msg||'驳回失败') }
            }
          })
        }
      })
    },

    // 工具
    setByPath(path, val){ const seg=path.split('.'); let o=this; for(let i=0;i<seg.length-1;i++){ o=o[seg[i]] } this.$set(o, seg[seg.length-1], val) },
    normalizeUrl(u){ if(!u) return ''; u=String(u).trim(); if(/^https?:\/\//i.test(u)) return u; if(/^\/\//.test(u)) return 'https:'+u; const b=(config.cdn||config.request_url||'').replace(/\/+$/,''); if(!b) return u; if(u[0]!=='/') u='/'+u; return b+u },
    uploadSingle(localPath){
      return new Promise((resolve,reject)=>{
        uni.uploadFile({
          url: `${config.request_url}/index/common/upload?token=${this.token()}`,
          filePath: localPath, name: 'file',
          success: (r)=>{
            try{
              const data = JSON.parse(r.data||'{}')
              if(+data.code===200 && data.data && data.data.src){ resolve(data.data.src) }
              else reject((data && data.msg) ? data.msg : '上传失败')
            }catch(err){ reject('上传异常') }
          },
          fail:()=>reject('网络异常')
        })
      })
    }
  }
}
</script>

<style>
.page{background:#f6f8ff;min-height:100vh;padding:32rpx 32rpx 160rpx;}
/* 顶部卡片 */
.car-card{background:#fff;border-radius:20rpx;padding:20rpx;display:flex;gap:20rpx;align-items:center;margin-bottom:28rpx;box-shadow:0 4rpx 12rpx rgba(0,0,0,0.05);}
.car-img{width:220rpx;height:130rpx;border-radius:12rpx;flex-shrink:0;}
.car-text{flex:1;font-size:28rpx;color:#333;line-height:1.6;}
.car-text .sub{color:#777;font-size:26rpx;}
.vin{font-size:26rpx;color:#888;margin-top:4rpx;}
/* 区块 */
.section{background:#fff;border-radius:20rpx;padding:24rpx;margin-bottom:28rpx;box-shadow:0 4rpx 12rpx rgba(0,0,0,0.04);}
.section-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:12rpx;}
.section-title{font-size:30rpx;font-weight:600;color:#333;}
.fold-btn{font-size:26rpx;color:#2563eb;}
/* 表单通用 */
.form-card{background:#fff;border:1rpx solid #e8eef6;border-radius:16rpx;overflow:hidden;}
.form-card.readonly .cell{opacity:.95}
.cell{display:flex;align-items:center;padding:22rpx 18rpx;border-bottom:1rpx solid #edf2f7;}
.cell:last-child{border-bottom:none;}
.label{width:260rpx;font-size:28rpx;color:#475569;}
.value{flex:1;display:flex;align-items:center;justify-content:flex-end;font-size:28rpx;color:#111827;}
.value-select{color:#111827;}
.ipt{width:100%;text-align:right;font-size:28rpx;}
.ic{width:44rpx;text-align:right;font-size:28rpx;color:#9aa5b1;margin-left:10rpx;}
.thumb{width:72rpx;height:72rpx;border-radius:8rpx;margin-left:12rpx;}
.uploader{display:flex;align-items:center}
.iconfont.icon-tupian{font-size:40rpx;line-height:1}
/* 经办记录 */
.timeline{border:1rpx solid #e8eef6;border-radius:16rpx;overflow:hidden;}
.t-row{display:flex;padding:20rpx 16rpx;border-bottom:1rpx solid #edf2f7;font-size:26rpx;color:#374151;}
.t-row:last-child{border-bottom:none;}
.t-hd{background:#f9fbff;font-weight:600;color:#111827;}
.t-col{flex:1;}
/* 意见栏 & 底部按钮 */
.op-box{border:1rpx solid #e8eef6;border-radius:16rpx;padding:16rpx;}
.op-box textarea{width:100%;font-size:28rpx;color:#111827;min-height:120rpx;}
.hint{margin-top:10rpx;color:#6b7280;font-size:24rpx;}
.danger{color:#ef4444}
.bottom-btn-box{position:fixed;left:0;right:0;bottom:0;background:#fff;padding:18rpx 28rpx;display:flex;gap:16rpx;box-shadow:0 -4rpx 10rpx rgba(0,0,0,0.06);}
.btn{flex:1;height:90rpx;line-height:90rpx;border-radius:45rpx;font-size:30rpx;font-weight:600;text-align:center;}
.btn-gray{background:#f1f5f9;color:#111827;}
.btn-primary{background:#22c55e;color:#fff;}
.btn:active{opacity:.92;}
.req .label:after{content:'*';color:#ef4444;margin-left:8rpx;}
</style>
